﻿@model AttrModel
@{
    ViewBag.Title = "Attr";
}

<h2>Attr</h2>

<p>The attr binding provides a generic way to set the value of any attribute for the associated DOM element. This is useful, for example, when you need to set the title attribute of an element, the src of an img tag, or the href of a link based on values in your view model, with the attribute value being updated automatically whenever the corresponding model property changes.</p>
<p><a href="http://knockoutjs.com/documentation/attr-binding.html" target="_blank">http://knockoutjs.com/documentation/attr-binding.html</a></p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.ATTR_VIEW_MODEL, Html.CreateVisiToggler("show the samples view model C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))
<br />
@Html.VisiTogglerFromPartial(CodeSamplePartials.ATTR_CONTROLLER, Html.CreateVisiToggler("show the samples controller C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))


<h3>Sample #1</h3>

<p>Image location and title is set via attr method</p>
<div><img @Html.KoAttr("src", m => m.ImageLocation).KoAttr("title", m => m.ImageTitle) /></div>

@Html.VisiTogglerFromPartial(CodeSamplePartials.ATTR1, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<p>&nbsp;</p>
<p>Next &gt; @Html.ActionLink("Value", "Value", "Examples")</p>

@Model.ApplyBindingsScript(KoBindingOptions.IncludeData)